<template>
  <div class="draft">
    <div class="naviga">&nbsp;&nbsp;{{$store.state.marketName}}&nbsp;>&nbsp;目标市场草案</div>
    <div>
      <div style="width: 50%" class="pull-left margin-top">
        <div class="border-r2">
          <div class="sub-banner">机会大小</div>
          <div style='display:flex'>
            <div class="tab-block-box">
                <div class="tab-block" v-for="item,key in marketArr" :class="'tab-block'+key">
                     <div class="tab-block-title">{{item.title}}</div>
                     <div style='display:flex'>
                        <span class="tab-block-content">
                          <div>销售额</div>
                          <div>{{item.amount}}</div>
                        </span>
                        <span class="tab-block-content">
                          <div v-show="!item.count==''">销售量</div>
                          <div>{{item.count}}</div>
                        </span>
                      </div>
                  </div>
              </div>
              <div class="tab-echarts">
                <chart v-if="future!=0"  :options="chartOption" :auto-resize="true"  style="width: 99%;height: 330px"></chart>
                <h3 v-if="future==0" style="width: 100%;height:440px;text-align:center;line-height:440px;font-size:14px">暂无数据</h3>
                <!-- <h3 v-if="yearPlans==0" style="width: 99%;height: 330px;text-align:center;font-size:14px">暂无数据</h3> -->
              </div>
          </div>
        </div>
      </div>
      <div style="width: 50%" class="pull-right margin-top">
        <div class="border-r border-point">
          <div class="sub-banner">机会点</div>
          <div class="chance-box">
            <div v-for="item,index in sisData"  class="chance-items">
              <el-tooltip  effect="dark"  :content="item.analysisResult" placement="top-start">
                 <P>{{index+1}}.{{item.analysisResult}}</p>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="border-r margin-top border-point">
          <div class="sub-banner">威胁点</div>
          <div class="chance-box">
            <div v-for="item1,index in sisData1"  class="chance-items">
              <el-tooltip  effect="dark"  :content="item1.analysisResult" placement="top-start">
                 <P>{{index+1}}.{{item1.analysisResult}}</p>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 border-r margin-top" style="padding-left: 0;padding-right: 0;border-bottom:20px solid #f6f6f6">
      <div class="sub-banner">客户关键购买因素</div>
      <div style="max-height:300px;overflow:scroll">
              <div v-for='item,index in factoryList' class=" buy-factory clearfix">
                <el-tooltip  v-if='!item.factoryShow'  effect="dark"  :content="item.purchaseFactors" placement="top-start">
                  <div  class="pFactory"><p >{{item.purchaseFactors}}</p></div>
                </el-tooltip>
                  <!--<div v-if='!item.factoryShow' class="pFactory"><p >{{item.purchaseFactors}}</p></div>-->
                  <el-input v-else placeholder="请输入内容" v-model="item.purchaseFactors"></el-input>
                  <div class="img-box">
                      <img
                        v-if="!item.factoryShow"
                        @click='editorFactory(item)'
                        src="../../images/editor.png" />
                      <img
                        v-else
                        @click='saveFactory(item)'
                        src="../../images/save.png"/>
                  </div>
                  <div class="img-box"><img @click="deleteFactory(factoryList,index)" src="../../images/delete.png" /></div>
              </div>
      </div>
      <div class="border-input col-xs-2" @click='addInput()'>+添加输入框</div>
    </div>
    <div class="col-xs-12 border-r margin-top rightMarket" style="padding-left: 0;padding-right: 0">
      <h3 class="col-xs-12 h-product">产品候选概念</h3>
        <div class="col-xs-3" style="background:#fff;line-height:500px;text-align: center;">
          <p  @click="addMarket()" style="background:#f6f6f6">+&nbsp;添加市场</p>
        </div>
        <div class="product-box col-xs-3" v-for="i,index in marketKeyData" >
          <div class="each">
            <div class="product-title1">{{i.key}}</div>
            <div :class="`product-icon${index%4}`">NEWS{{index+1}}</div>
            <div class="product-content1">
              <div class="key-word">关键字:</div>
              <ul class="clearfix" v-for="item,index1 in i.list">
                <el-tooltip  v-if='!item.pShow'  effect="dark"  :content="item.keyWords" placement="top-start">
                  <p>{{item.keyWords}}</p>
                </el-tooltip>
                <!-- <p v-if='!item.pShow'>{{item.keyWords}}</p> -->
                <el-input v-else style="width:70%" v-model="item.keyWords" placeholder="请输入内容"></el-input>
                <div>
                   <img
                     v-if='!item.pShow'
                     @click="editor(item)"
                     src="../../images/editor.png" />
                   <img v-else @click='saveKey(item)' src="../../images/save.png"/>
                </div>
                <div><img  src="../../images/delete.png" @click="keyDelete(i.list,index1)"/></div>

              </ul>
              <ul class="clearfix" v-if="show">
               <el-input style="width:70%" v-model="keyValue" placeholder="请输关键字"></el-input>
                <div>
                   <img src="../../images/save.png"/>
                </div>
                <div><img  src="../../images/delete.png" @click="keyDelete(i.list,index1)"/></div>

              </ul>
            </div>
            <h3 @click="addKey(i.list)">+添加行</h3>
          </div>
        </div>
    </div>
     <!-- 添加市场弹框start -->

    <div class="pop-up-source">
      <el-dialog
        title="添加市场"
        :visible.sync="centerMarketVisible"
        width="53%"
        style="border-radius: 10px"
        :before-close="beforeClose"
        center>
        <div class="pop-cont-market ">
          <ul class="col-xs-12">
            <span class="col-xs-2">市场名称</span>
            <div class="col-xs-10 pop-market">
              <el-input maxlength=16 v-model="marketInput" placeholder="请输入市场名称"></el-input>
            </div>
          </ul>
          <ul class="col-xs-12">
            <span class="col-xs-2">关键字</span>
            <div class="col-xs-10">
              <el-input maxlength=60 v-model="popkeyInput" placeholder="请输入关键字"></el-input>
            </div>
          </ul>
        </div>
        <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="sourceMarket()" style="width: 100px;height: 40px;margin: 200px 0 20px 0">确 定</el-button>
            <el-button @click="cancelSource()"  style="width: 100px;height: 40px;margin: 200px 0 20px 0">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <!--添加市场弹框end-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChart: {},
      factoryList: [],
      marketId: "",
      marketKeyData: [],
      show: false,
      keyValue: "",
      editorShow: true,
      pShow: true,
      centerMarketVisible: false,
      marketInput: "",
      keyInput: "",
      popkeyInput: "",
      sisData: [],
      sisData1: [],
      marketArr: [],
      years: [],
      counts: [],
      share: [],
      chartOption: {},
      yearPlans: "",
      future: ""
    };
  },
  mounted() {
    this.marketId = this.$store.state.id;
    console.log(this.$store.state.itemData);
    this.getChance();
    this.getFactory(); //获取购买关键因素
    this.getkeyWord(this.marketId);
    console.log(this.marketArr);
    this.getOppor();
    this.getOppor1();
    this.getShare(() => {
      this.drawLine();
    });
  },
  methods: {
    //获取机会大小
    getChance() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketTrends",
          query: {
            categoryId: this.$store.state.itemData.market.categoryId,
            id: this.marketId
            //  creator:this.$store.state.user.id,
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let dataopper = res.data.data;
            let arr = [1, 2, 3];
            let arr1 = [];
            for (let i in arr) {
              console.log(i);
              if (i == 0) {
                arr1.push({
                  title: "细分市场容量",
                  amount:
                    dataopper.list[0].marketBase == null
                      ? '无数据'
                      : dataopper.list[0].marketBase.marketBase,
                  count: ''
                });
              } else if (i == 1) {
                arr1.push({
                  title: "细分市场增长率",
                  amount:
                    dataopper.list[0].categorySale == null
                      ? '无数据'
                      : (
                          dataopper.list[0].categorySale.categoryAmountRatio *
                          100
                        ).toFixed(2) + "%",
                  count:
                    dataopper.list[0].categorySale == null
                      ? '无数据'
                      : (
                          dataopper.list[0].categorySale.categorySalesRatio *
                          100
                        ).toFixed(2) + "%"
                });
              } else if (i == 2) {
                arr1.push({
                  title: "历史份额",
                  amount:
                    dataopper.list[0].categorySale == null
                      ? '无数据'
                      : dataopper.list[0].categorySale.categoryAmount,
                  count:
                    dataopper.list[0].categorySale == null
                      ? '无数据'
                      : dataopper.list[0].categorySale.categoryCount
                });
              }
            }
            this.marketArr = arr1;
          }
        })
        .catch(error => {});
    },
    //获取机会威胁
    getOppor(param) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOpportunityAnalysis",
          query: {
            marketId: this.$store.state.id,
            analysisType: "机会"
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data.list);
            this.sisData = res.data.data.list;
          }
        })
        .catch(error => {});
    },
    //获取威胁
    getOppor1() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOpportunityAnalysis",
          query: {
            marketId: this.$store.state.id,
            analysisType: "威胁"
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data.list);
            this.sisData1 = res.data.data.list;
          }
        })
        .catch(error => {});
    },
    //获取客户购买关键因素
    getFactory() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getPurchaseFactors",
          query: {
            marketId: this.marketId
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(this.factoryList);
            for (let i in res.data.data) {
              res.data.data[i].factoryShow = false;
            }
            this.factoryList = res.data.data;
          }
        })
        .catch(error => {});
    },
    //编辑购买因素
    editorFactory(item) {
      console.log(item);
      item.factoryShow = true;
    },
    //保存购买因素
    saveFactory(item) {
      console.log(item.id);
      console.log(item);
      //如果item.id为undefined是添加购买因素
      if (item.id == undefined) {
        this.$http
          .post(this.GLOBAL.host, {
            method: "addPurchaseFactors",
            data: {
              marketId: this.marketId,
              purchaseFactors: item.purchaseFactors,
              creator: this.$store.state.user.id
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "购买因素添加成功",
                type: "success"
              });
              this.getFactory(this.marketId);
              console.log(this.factoryList);
            } else {
              this.$message({
                message: "添加失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      } else {
        //修改购买关键因素
        this.$http
          .post(this.GLOBAL.host, {
            method: "updatePurchaseFactors",
            data: {
              id: item.id,
              purchaseFactors: item.purchaseFactors
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "购买因素修改成功",
                type: "success"
              });
            } else {
              this.$message({
                message: "修改失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      }
      item.factoryShow = false;
    },

    //删除购买因素
    deleteFactory(list, index) {
      console.log(list, index);
      const item = list[index];
      console.log(item.id);
      if (item.id == "") {
        list.splice(index, 1);
        return;
      }
      this.$http
        .post(this.GLOBAL.host, {
          method: "delPurchaseFactors",
          data: {
            id: item.id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: "购买关键因素删除成功",
              type: "success"
            });
            //刷新页面
            this.getFactory(this.marketId);
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            });
          }
        })
        .catch(error => {});
    },
    //添加输入框
    addInput() {
      this.factoryList.push({
        //"id": null,
        marketId: this.marketId,
        purchaseFactors: "",
        creator: this.$store.state.user.id,
        factoryShow: true
      });
      console.log(this.factoryList);
    },
    //获取近三年得市场占有率
    getShare(callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOccupancyTarget",
          query: {
            marketId: this.marketId
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data);
            let future1 = Object.keys(res.data.data).length;
            this.future = future1;
            if (future1 == 0) {
              return;
            }
            let yearArr = [];
            let countArr = [];
            let shareArr = [];
            for (let i in res.data.data) {
              console.log(res.data.data);
              yearArr.push(res.data.data[i].targetYear);
              let amount = res.data.data[i].salesAmount;
              console.log(amount);
              let gross = res.data.data[i].grossProfitMargin / 100;
              console.log(gross);
              let all = (amount * gross).toFixed(2);
              countArr.push(all);
              shareArr.push(parseInt(res.data.data[i].marketShare.split("%")));
            }
            this.years = yearArr;
            this.counts = countArr;
            this.share = shareArr;
            callback();
          }
        })
        .catch(error => {});
    },
    drawLine() {
      // 绘制图表
      this.chartOption = {
        title: {
          text: "未来三年目标",
          textStyle: {
            color: "#75C3F3",
            fontSize: "10px"
          }
        },
        color: ["#75C3F3", "#BBB4E9"],
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            console.log(params);
            let html = "";
            html +=
              params[0].name +
              "</br>" +
              params[0].marker +
              params[0].seriesName +
              ":" +
              Math.abs(params[0].value) +
              "</br>" +
              params[1].marker +
              params[1].seriesName +
              ":" +
              Math.abs(params[1].value) +
              "%";
            return html;
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["财务收益", "市占率"],
          right: 0
        },
        grid:{
          left:'15%'
        },
        xAxis: [
          {
            type: "category",
            data: this.years
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "财务收益"
          },
          {
            type: "value",
            name: "市占率",
            interval: 20,
            axisLabel: {
              formatter: function(params) {
                return params + "%";
              }
            }
          }
        ],
        series: [
          {
            name: "财务收益",
            type: "bar",
            barWidth: "15px",
            data: this.counts
          },
          {
            name: "市占率",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: this.share
          }
        ]
      };
    },
    //////
    //添加市场
    addMarket() {
      this.centerMarketVisible = true;
    },

    //新增市场弹框接口
    sourceMarket() {
      if (this.marketInput.length === 0) {
        this.$message({
          message: "市场名称不能为空",
          type: "error"
        });
        return;
      } else if (this.popkeyInput.length === 0) {
        this.$message({
          message: "关键字不能为空",
          type: "error"
        });
        return;
      } else {
        this.$http
          .post(this.GLOBAL.host, {
            method: "addMarketKeyWords",
            data: {
              marketId: this.marketId,
              groupName: this.marketInput,
              keyWords: this.popkeyInput
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.centerMarketVisible = false;
              this.marketInput = "";
              this.popkeyInput = "";
              //刷新获取关键字
              this.getkeyWord(this.marketId);
            } else {
              this.$message({
                message: "添加失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      }
    },
    cancelSource() {
      this.centerMarketVisible = false;
      (this.marketInput = ""), (this.popkeyInput = "");
    },
    beforeClose() {
      this.centerMarketVisible = false;
      (this.marketInput = ""), (this.popkeyInput = "");
    },
    //获取市场的关键字信息
    getkeyWord(marketId) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketKeyWords",
          query: { marketId: marketId }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(this.marketKeyData);
            let data = res.data.data;
            let arr = [];
            for (let i in data) {
              for (let a in data[i]) {
                data[i][a].pShow = false;
              }
              arr.push({ key: i, list: data[i] });
            }

            this.marketKeyData = arr;
          }
        })
        .catch(error => {});
    },
    keyDelete(list, index) {
      let e = list[index];
      if (e.id == "") {
        list.splice(index, 1);
        return;
      }
      this.$http
        .post(this.GLOBAL.host, {
          method: "delMarketKeyWordsById",
          data: { id: e.id }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: "关键字删除成功",
              type: "success"
            });
            this.getkeyWord(this.marketId);
          } else if (res.data.code == 203) {
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            });
          }
        })
        .catch(error => {});
    },
    //添加行
    addKey(e) {
      console.log(e[0].groupName);
      e.push({
        keyWords: "",
        groupName: e[0].groupName,
        creator: this.$store.state.user.id,
        createTime: null,
        id: "",
        marketId: "",
        pShow: true
      });
      console.log(e);
    },
    //新增添加一行保存
    addSaveKey(item) {},
    editor(item) {
      console.log(item);

      item.pShow = true;
    },
    saveKey(item) {
      console.log(123);
      if (item.id != "") {
        //如果id不为空为修改
        this.$http
          .post(this.GLOBAL.host, {
            method: "updateMarketKeyWords",
            data: {
              id: item.id,
              keyWords: item.keyWords
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "关键字修改成功",
                type: "success"
              });
              item.pShow = false;
              //修改成功后刷新市场
              this.getkeyWord(this.marketId);
            } else {
              this.$message({
                message: "修改失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      } else {
        //如果id=''为新增
        this.$http
          .post(this.GLOBAL.host, {
            method: "addMarketKeyWords",
            data: {
              marketId: this.marketId,
              groupName: item.groupName,
              keyWords: item.keyWords
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "单条关键字添加成功",
                type: "success"
              });
              item.pShow = false;
              //刷新获取关键字
              this.getkeyWord(this.marketId);
            } else {
              this.$message({
                message: "添加失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      }
    }
  }
};
</script>
<style lang='less'>
.draft {
  .pop-up-source {
    .el-dialog__body {
      .pop-cont-market {
        > ul:nth-child(1) {
          margin-bottom: 20px;
        }
      }
    }
  }
  .h-product {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    background: #eeeeee;
    color: #333333;
    margin-bottom: 20px;
  }
  .naviga {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 5px;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #e3e3e3;
  }
  .border-point {
    max-height: 175px;
    overflow: scroll;
  }
  .border-input {
    text-align: center;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    line-height: 40px;
    border-radius: 2px;
    margin-left: 2%;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .buy-factory {
    width: 100%;
    height: 60px;
    > .el-input {
      width: 83%;
      float: left;
      margin-top: 10px;
      display: flex;
      margin: 5px 0;
      justify-content: center;
      .el-input__inner {
        width: 95%;
        margin: auto;
      }
    }
    > .pFactory {
      width: 83%;
      float: left;
      margin-top: 10px;
      > p {
        font-size: 14px;
        line-height: 40px;
        width: 95%;
        margin: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    > .img-box {
      height: 40px;
      float: left;
      width: 8.3%;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      img {
        width: 20px;
        height: 20px;
        margin-top: 10px;
      }
    }
  }
  .tab-block-box {
    width: 230px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
  }
  .tab-block {
    width: 200px;
    border-radius: 5px;
    height: 90px;
    margin-top: 10px;
    display: inline-block;
    color: white;
  }
  .tab-block0 {
    background: linear-gradient(to right, #fd8296, #f9e96f);
  }
  .tab-block1 {
    background: linear-gradient(to right, #3ec4d7, #50d18e);
  }
  .tab-block2 {
    background: linear-gradient(to right, #9e93e5, #75c2f1);
  }
  .tab-block-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .tab-block-content {
    display: inline-block;
    flex: 1;
  }
  .tab-block-content > div {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .tab-echarts {
    width: calc(100% - 240px);
    display: inline-block;
  }
  .chance-box {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0 5px 5px 0;
  }
  .chance-items {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 15px;
    p {
      width: 95%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .product-title {
    height: 80px;
    line-height: 80px;
    width: 100%;
    text-align: center;
    background-color: #e7e5e6;
    border-radius: 5px 5px 0 0;
  }
  .product-icon {
    color: white;
    border-radius: 50%;
    background-color: #fd8297;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin-top: -30px;
    margin-left: calc(50% - 30px);
  }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #f5f5f5;
  }
  .pop-cont-market {
    span {
      line-height: 40px;
    }
  }
  .el-collapse {
    margin-bottom: 10px;
    li {
      text-align: left;
      width: 90%;
      margin: auto;
      color: #333333;
    }
    .title {
      text-align: left;
      margin: auto;
      width: 90%;
      font-size: 14px;
      color: #8c8c8c;
      // border-bottom: 1px solid #e0e0e0
    }
  }
  .border-r {
    border-radius: 5px;
    background-color: white;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    display: block;
  }
  .sub-title {
    border-left: 3px solid #3dc4d8;
    padding-left: 15px;
  }
  .border-r2 {
    border-radius: 5px;
    background-color: white;
    width: calc(100% - 15px);
    margin-left: 15px;
    margin-right: 7.5px;
    display: block;
  }
  .sub-banner {
    background-color: #eeeeee;
    height: 27px;
    line-height: 27px;
    padding-left: 15px;
    border-radius: 5px 5px 0 0;
  }
  .market-new {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 15px;
    margin-top: 30px;
  }
  .leftMarket {
    background: #e7e6e6;
    height: 800px;
    padding-bottom: 20px;
    overflow: scroll;
    text-align: center;
    .el-collapse-item__header {
      text-align: left;
    }
    > p:nth-child(1) {
      line-height: 40px;
      height: 40px;
      padding-left: 10px;
      margin-bottom: 0;
      text-align: center;
    }
  }
  .rightMarket {
    background: #fff;

    margin-top: 0;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    > div {
      //background: #fff;
      height: 500px;
      margin-bottom: 10px;
    }
    .product-box {
      background: #fff;

      .each {
        background: #fff;
        height: 100%;
        border: 1px solid #eee;
        margin: auto;
        position: relative;
        > .product-title1 {
          text-align: center;
          line-height: 150px;
          height: 150px;
          background: #e7e6e6;
          color: #8f8f8f;
          font-size: 16px;
        }
        > .product-icon0 {
          color: white;
          border-radius: 50%;
          background-color: #fd8297;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          margin-top: -30px;
          margin-left: calc(50% - 30px);
        }
        > .product-icon1 {
          color: white;
          border-radius: 50%;
          background-color: #9c96e7;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          margin-top: -30px;
          margin-left: calc(50% - 30px);
        }
        > .product-icon2 {
          color: white;
          border-radius: 50%;
          background-color: #64bef5;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          margin-top: -30px;
          margin-left: calc(50% - 30px);
        }
        > .product-icon3 {
          color: white;
          border-radius: 50%;
          background-color: #3fcce1;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          margin-top: -30px;
          margin-left: calc(50% - 30px);
        }
        > .product-content1 {
          height: 300px;
          height: 250px;
          overflow: scroll;
          > .key-word {
            padding-left: 20px;
            font-size: 14px;
            color: #666666;
          }
          > ul {
            width: 100%;
            margin: 0;
            padding-left: 10px;
            > p {
              float: left;
              width: 70%;
              padding-left: 10px;
              line-height: 40px;
              background: #fff;
              color: #666666;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            > div {
              float: left;
              width: 15%;
              display: flex;
              margin: 5px 0;
              justify-content: center;
            }
            img {
              width: 20px;
              height: 20px;
              margin-top: 10px;
            }
          }
        }
        > h3 {
          font-size: 14px;
          color: #747474;
          margin-left: 10px;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          width: 30%;
          text-align: center;
          line-height: 40px;
          height: 40px;
        }
      }
    }
    > div:nth-child(1) {
      p {
        width: 100%;
        height: 100%;
        background: #edecec;
        line-height: 800px;
        text-align: center;
        font-size: 20px;
      }
    }
  }
  .infoMarket {
    padding: 0;
    background: #ffffff;
    border-radius: 5px;
    //border-bottom-right-radius:5px ;
  }
}
</style>
